<template>
  <div class="clearfix c-width100" style="margin: 20px 0 0 0; overflow-clip: hidden;">
    <el-form class="fl c-width70" ref="postForm" :model="postForm" label-width="100px">
      <el-form-item label="标题:">
        <el-input :maxlength="40" placeholder="请输入标题限" class="width400" v-model="postForm.name"></el-input>
      </el-form-item>
      <el-form-item label="反馈详情：">
        <tinymce ref="tinymce" :height="300" v-model="postForm.content" style="width: 550px;" :key="1"></tinymce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitBack">提交反馈</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <div class="fr c-width30">
      <div class="margin-b">我的反馈</div>
      <ul v-loading="this.listLoading">
        <li class="font-s12" v-for="(item, index) in myReply" @click="feedbackDetail(item.feedbackId)" :key="index">
          <span class="blue" v-if="item.status== -1">[待回复]</span>
          <span class="blue" v-if="item.status== 1">[已查阅]</span>
          <span class="title">{{item.name}}</span>
        </li>
      </ul>
      <div class="block">
       <el-pagination

			      @current-change="handleCurrentChange"
			      :current-page="listQuery.page"
			       small
            layout="prev, pager, next"
			      :total="listQuery.total">
			    </el-pagination>
      </div>
    </div>
    <feedbackDetail @closeFeedbackDetail='closeFeedbackDetail' v-show="isShowFeedbackDetail" :feedbackId="feedbackId"></feedbackDetail>
  </div>
</template>
<script>
import { toFeedback, toGetFeedbackInfo } from '@/api/systemManage'
import Tinymce from '@/components/Tinymce'
import feedbackDetail from './feedbackDetail.vue'
export default {
  components: {
    Tinymce,
    feedbackDetail
  },

  data() {
    return {
      isShowFeedbackDetail: false,
      postForm: {
        name: '',
        content: ''
      },
      feedbackId: '',
      myReply: [],
      listQuery: {
        total: 0,
        page: 1
      },
      listLoading: false
    }
  },
  created() {
    this.getFeedbackInfo()
  },
  methods:
  {
    getFeedbackInfo() {
      this.listLoading = true
      toGetFeedbackInfo(this.listQuery).then(res => {
        this.myReply = res.data.data.data
        this.listQuery.total = res.data.data.total
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      console.log(this.listQuery.page)
      this.getFeedbackInfo()
    },
    feedbackDetail(id) {
      this.isShowFeedbackDetail = true
      this.feedbackId = id
    },
    closeFeedbackDetail(msg) {
      this.isShowFeedbackDetail = msg
    },
    submitBack() { // 提交反馈方法
      if (this.postForm.name == '') {
        this.$message({
          type: 'info',
          message: '反馈标题不能为空'
        })
        return
      }
      if (this.postForm.content == '') {
        this.$message({
          type: 'info',
          message: '反馈内容不能为空'
        })
        return
      }
      toFeedback(this.postForm).then(res => {
      // 正确回调
        this.$message({
          type: 'info',
          message: '提交成功，管理员将收到反馈问题'
        })

        this.getFeedbackInfo()
        this.postForm.name = ''
        this.postForm.content = ''
        this.$refs['tinymce'].setContent('')
      // this.$router.push({ path: `/feedback` })
      })
        .catch(err => {
          console.log(err)
        })
    },
    cancel() {
      this.postForm.name = ''
      this.postForm.content = ''
      this.$refs['tinymce'].setContent('')
    }
  }

}

</script>
<style scoped lang="scss">
  ul, li, p {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    cursor: pointer;
  }

  li:hover{
    color: #409EFF;
  }
  .title {
    line-height: 20px;
  }
</style>
